<template>
  <div>
    <Row>
      <Card>
        <Modal
          v-model="modelShow"
          title="增加跟进记录"
          :loading="saveLoading"
          @on-ok="ok('recordForm')"
          @on-cancel="cancel('recordForm')">
          <Form :model="recordForm"  ref="recordForm" :rules="recordRuleValidate">
            <FormItem prop="content">
              <Input v-model="recordForm.content" placeholder="请输入跟进记录" type="textarea" :autosize="{minRows: 6,maxRows: 10}" />
            </FormItem>
          </Form>
        </Modal>
        <div style="display: flex;flex-direction: row-reverse">
          <Button type="primary" @click="add" >新增</Button>
        </div>
        <div class="edittable-con-1 list" style="">
          <Table border ref="selection" :columns="columns" :data="list"></Table>
        </div>
        <div style="text-align: center;margin-top: 20px">
          <Page :current="pageId" :total="totalPage" :page-size="10" @on-change='search'></Page>
        </div>
      </Card>
    </Row>
  </div>
</template>

<script>
  import { getRecordList,addRecord,delRecord } from '@/api/user'

  export default {
    name: 'user-customer',
    data () {
      return {
        searchObj: {
          loanApplicationId:this.$route.query.id,
          pageId: 1
        },
        modelShow: false,
        recordForm: {content:'', loanApplicationId:this.$route.query.id},
        recordRuleValidate:{
          content: [
            {required: true, message: '记录不能为空', trigger: 'blur'}
          ],
        },
        saveLoading: false,
        columns: [
          {
            title: '编号',
            align: 'center',
            key: 'id',
            width: 100
          },
          {
            title: '跟进记录',
            align: 'center',
            key: 'content',
            width: 120
          },

          {
            title: '发布日期',
            align: 'center',
            key: 'createTime',
            width: 180
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            render: (h, params) => {
              return h('div', [
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '您确定要删除这条数据吗?',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.del(params.row.id)
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    }
                  }, '删除')
                ])
              ])
            }
          }
        ],
        list: [],
        pageId: 1,
        totalPage: 10
      }
    },
    methods: {
      getList () {
        getRecordList(this.searchObj).then(data => {
          this.list = data.data
          this.pageId = data.current_page
          this.totalPage = data.total
        })
      },
      del (id) {
        delRecord(id).then(() => {
          this.$Message.success('删除成功')
          this.getList()
        })
      },
      add () {
        this.modelShow = true
      },
      ok (name) {
        this.saveLoading = true
        this.$refs[name].validate((valid) => {
          if (valid) {
            addRecord(this.recordForm).then(() => {
              this.$Message.success('新增成功');
              this.saveLoading = false
              setTimeout(()=>{
                this.$router.go(-1)
              }, 1500)
            }, () => {
              this.saveLoading = false
            })
          } else {
            this.$Message.error('新增失败');
            this.saveLoading = false
          }
        })
      },
      cancel () {
        this.recordForm = {content:'', loanApplicationId:this.$route.query.id}
        this.modelShow = false
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style scoped>

</style>
